/*
 * @Author: Kilims Ye
 * @LastEditors: Kilims Ye
 * @Date: 2020-05-29 16:34:14
 * @LastEditTime: 2021-01-22 09:48:41
 * @Description:
 */
import { css, keyframes } from "styled-components";
import {
  zoomIn,
  slideInUp,
  fadeInUp,
  rollIn,
  fadeInRight,
  pulse,
  fadeIn,
  flipInY
} from "react-animations";

const zoomInAnimation = keyframes`${zoomIn}`;
const slideInUpAnimation = keyframes`${slideInUp}`;
const fadeInUpAnimation = keyframes`${fadeInUp}`;
const fadeInAnimation = keyframes`${fadeIn}`;
const rollInAnimation = keyframes`${rollIn}`;
const fadeInRightAnimation = keyframes`${fadeInRight}`;
const pulseAnimation = keyframes`${pulse}`;
const flipInYAnimation = keyframes`${flipInY}`;

export default {
  themeStyles: {
    blackStyle: {
      fg: "white",
      bg: "#222"
    },
    warmStyle: {
      fg: "tomato",
      bg: "papayawhip"
    }
  },
  headerishstuff: css`
    height: 150px;
    padding: 20px;
  `,
  normalFormFontSizeStyle: css`
    font-size: 0.38rem !important;
  `,
  normalTipsFontSizeStyle: css`
    font-size: 0.35rem !important;
  `,
  lineHeightStyle: css`
    line-height: 1.5rem;
    min-height: 1.3rem;
  `,
  zoomIn: css`
    animation: 0.3s ${zoomInAnimation};
  `,
  slideInUp: css`
    animation: 0.8s ${slideInUpAnimation};
  `,
  fadeInUp: css`
    animation: 0.8s ${fadeInUpAnimation};
  `,
  flipInY: css`
    animation: 1s ${flipInYAnimation};
  `,
  rollIn: css`
    animation: 1s ${rollInAnimation};
  `,
  fadeInRight: css`
    animation: 1s ${fadeInRightAnimation};
  `,
  fadeIn: css`
    animation: 1s ${fadeInAnimation};
  `,
  fadeInUpInfinite: css`
    animation: 1.2s ${fadeInUpAnimation} infinite linear;
  `,
  scaleInfinite: css`
    /**无限缩放 */
    @keyframes scaleDraw {
      0% {
        transform: scale(1);
      }
      25% {
        transform: scale(1.1); /*放大1.1倍*/
      }
      50% {
        transform: scale(1);
      }
      75% {
        transform: scale(1.1);
      }
    }
    animation: scaleDraw 5s ease-in-out infinite;
  `,
  pulseInfinite: css`
    animation: 1.2s ${pulseAnimation} infinite linear;
  `
};
